<template>
  <div
    class="mlist indexnews module ff_noSlider"
    style="
      background-position: initial;
      background-size: cover;
      background-repeat: no-repeat;
    "
  >
    <div class="bgmask"></div>

    <div class="module_container">
      <div
        class="container_header wow"
        style="visibility: visible; animation-name: fadeInUp"
      >
        <p class="title">{{ $t("home_new") }}</p>
        <p class="subtitle">News center</p>
      </div>

      <div
        class="container_category wow movedx"
        data-movedx-mid="2"
        data-movedx-distance="15"
        style="visibility: visible; animation-name: fadeInUp"
      >
        <router-link class="active" :to="{ name: 'New' }">
          <span>{{ $t("home_more") }}&nbsp;></span>
        </router-link>
      </div>
      <div class="clearfix"></div>
      <div class="content_wrapper">
        <ul class="content_list clearfix">
          <li class="item_block wow" v-for="(item, index) in news" :key="index">
            <router-link
              class="item_box"
              :to="{ name: 'NewDetail', query: { id: item.id } }"
            >
              <div class="item_img" target="_blank" style="height: 160px">
                <img :src="item.cover | pathImg" height="160" />
                <div class="item_mask"></div>
              </div>
              <div class="item_wrapper clearfix">
                <p class="date_wrap">
                  <span class="year">{{ item.utime | dateFormatYear }}</span>
                  <span class="md"
                    >{{ item.utime | dateFormatMonth }}-{{
                      item.utime | dateFormatDay
                    }}</span
                  >
                </p>
                <div class="item_info clearfix">
                  <p class="title ellipsis">
                    {{ item | filterTitle }}
                  </p>
                  <p class="subtitle ellipsis"></p>
                </div>
                <div class="item_des">
                  <p class="description">
                    {{ item | filterDescription }}
                  </p>
                </div>
              </div>
            </router-link>
            <router-link
              class="details"
              :to="{ name: 'NewDetail', query: { id: item.id } }"
            >
              {{ $t("detail") }}
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
import { isEn } from '@/common/util';
export default {
  name: 'HomeTeam',
  props: {
    news: {
      type: Array
    }
  },
  filters: {
    filterTitle(item) {
      return isEn() ? item.title_en : item.title
    },
    filterSubTitle(item) {
      return isEn() ? item.extra_en : item.extra
    },
    filterDescription(item) {
      return isEn() ? item.description_en : item.description
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
@import url("./style.css");
</style>
